<template>
    <div class="child">
        <h2>子组件</h2>
        <p v-if="toy">玩具：{{ toy }}</p>
        <p v-if="other_toy">赠与的玩具：{{ other_toy }}</p>
        <el-button type="success" @click="emit('send-toy',toy)">把玩具给父组件</el-button>
        <el-button type="success" @click="emitter.emit('send-my-toy', toy)">把玩具给哥哥</el-button>
    </div>
</template>

<script lang="ts" setup name="Child">
import { ref } from 'vue';
import emitter from '@/utils/emitter';

let toy = ref('奥特曼')
let other_toy = ref('')
const emit = defineEmits(['send-toy'])
emitter.on('send-brother-toy', (v:any) => {
    other_toy.value = v
})
</script>

<style scoped>
.child{
    background-color: red;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px black;
}
</style>